<template>
  <el-container>
    <el-container>
      <el-aside width="220px">
        <img src="../../assets/shui.png" style='width:180px;height: 90px;'>
        <el-row>
          <el-col :span="12">
            <el-menu
              :default-active="this.$route.path"
              class="el-menu-vertical-demo"
              background-color="#304156"
              text-color="#fff"
              active-text-color="#019BA0"
              router>
              <el-submenu :index="menu1.link" v-for="menu1 in menu" :key="menu1.id">
                <template slot="title" >
                  <i class="el-icon-s-custom"></i>
                  <span  @click="show(menu1.link)">{{menu1.permName}}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item :index="menu2.link" v-for="menu2 in menu1.children" :key="menu2.id">
                      {{menu2.permName}}
                    </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
          <el-card shadow="always">
            <el-row class="mainhead">
              <el-col :span="10" style="text-align: left;">
                <div class="sw">
                    <el-avatar><img src="../../assets/sw.png"></el-avatar>
                    <span style="font-size: 22px;color:#019BA0;">智慧水务调度平台</span>
                </div>
              </el-col>
              <el-col :span="14" style="text-align: right;">
                <div style="width:650px;color:#019BA0;">欢迎:{{loginName}}</div>
                <div class="userimg">
                  <el-button @click="drawer = true" type="text">
                    <el-avatar style="width:80px;height:70px;"><img src="../../assets/admin.gif"></el-avatar>
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-drawer
             :with-header="false"
             :visible.sync="drawer"
             :direction="direction"
             style="height:200px;text-align: right;">
             <!-- <el-button type="text" style="margin-right:20px;margin-top: 10px;">修改密码</el-button> -->
             <el-button type="text" style="margin-right:30px;margin-top: 10px;" @click="exit()">退出登录</el-button>
          </el-drawer>
         <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    data(){
      return{
         menu:[],
          drawer: false,
          direction: 'ttb',
          loginName:'',
      }
    },
    methods: {
      getPermAll(){
        this.axios.get("/perm/menu").then(res=>{
          this.menu=res.data.data;
          this.loginName=localStorage.getItem("LoginName");
        })
      },
      exit(){
           window.localStorage.setItem("Authorization",'');
           this.sucMsg("退出成功");
           this.$router.push("/login");
      },
      sucMsg(msg) {
            this.$message({
              message: msg,
              offset:250,
              duration:1000,
              type: 'success'
            });
      },
      errorMsg(msg) {
          this.$message.error({
            message: msg,
            offset:250,
            duration:1000
          });
      },
      show(i){
        if(i=='/maintain/manager'){
          this.$router.push("/maintain/manager")
        }
      }
    },
    created(){
     this.getPermAll();
    },
   watch:{
      '$route' () {
        // 监听路由变化
        if(this.$route.path=='/device/base'){
           this.$router.push("/property/8");
        }
      }
    }
  }
</script>

<style scoped="scoped">

  .el-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  .mainhead{
    background-color: #ffffff;
  }
  .el-card{
    padding: 0;
    margin: 0;
    height: 60px;
  }
  .userimg{
    margin-top: -55px;
    margin-right:10px;
  }

  .sw{
    margin-top: -10px;
    margin-right: 30px;
  }

  .el-aside {
    margin: 0;
    padding: 0;
    background-color: #304156;
    color: #333;
    text-align: center;
  }

  .el-main {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #333;
  }

  .el-submenu{
    margin-left: -20px;
    width: 240px;
  }
  .el-menu-item{
    margin-left: 37px;
  }
  .is-active{
    font-size: 18px;
    background-color: aquamarine;
  }

</style>
